import React from 'react';
import Canvas from './Canvas';
import { useNavigate } from 'react-router-dom';
import { useGame } from '../gameState';
import { containerStyles, buttonStyles, theme } from '../styles/theme';

/**
 * 游戏页面组件
 * 提供绘画功能，显示当前需要绘制的词语，并处理游戏流程
 */
const GamePage: React.FC = () => {
  // 使用 React Router 的导航钩子
  const navigate = useNavigate();
  // 使用游戏状态管理
  const { state, dispatch } = useGame();

  return (
    // 使用页面容器样式，确保页面居中显示
    <div style={containerStyles.page}>
      {/* 使用卡片容器样式，提供内容区域 */}
      <div style={containerStyles.card}>
        {/* 页面标题 */}
        <h1 style={theme.typography.h1}>绘画时间</h1>
        {/* 当前需要绘制的词语 */}
        <div style={{ 
          ...theme.typography.body,
          marginBottom: theme.spacing.lg,
          textAlign: 'center'
        }}>
          请画出: <strong style={{ color: theme.colors.primary }}>{state.currentWord || '苹果'}</strong>
        </div>
        {/* 画布组件 */}
        <Canvas width={800} height={500} />
        {/* 操作按钮组 */}
        <div style={{ 
          display: 'flex', 
          gap: theme.spacing.md,
          marginTop: theme.spacing.xl,
          justifyContent: 'center'
        }}>
          {/* 提交按钮 */}
          <button 
            onClick={() => navigate('/result')}
            style={buttonStyles.primary}
          >
            提交
          </button>
          {/* 返回按钮 */}
          <button 
            onClick={() => navigate('/')}
            style={buttonStyles.secondary}
          >
            返回
          </button>
        </div>
      </div>
    </div>
  );
};

export default GamePage;